<%= content_tag :div,
  class: link_editor.css_classes,
  data: link_editor.data_attributes do %>
  <%= element_form.fields_for(:ingredients, link_editor.ingredient) do |f| %>
    <%= ingredient_label(link_editor) %>
    <div class="input-field">
      <%= f.text_field :value,
        class: "thin_border text_with_icon readonly",
        id: link_editor.form_field_id,
        "data-link-value": true,
        minlength: link_editor.length_validation&.fetch(:minimum, nil),
        maxlength: link_editor.length_validation&.fetch(:maximum, nil),
        required: link_editor.presence_validation?,
        pattern: link_editor.format_validation,
        readonly: true,
        tabindex: -1
      %>
      <%= f.hidden_field :link_title, "data-link-title": true, id: nil %>
      <%= f.hidden_field :link_class_name, "data-link-class": true, id: nil %>
      <%= f.hidden_field :link_target, "data-link-target": true, id: nil %>
      <%= render "alchemy/ingredients/shared/link_tools", ingredient_editor: link_editor, wrapper_class: "ingredient_link_buttons" %>
    </div>
  <% end %>
<% end %>

<script>
  $("#<%= link_editor.form_field_id %>").on("change", function() {
    $("[data-ingredient-id='<%= link_editor.id %>'] input.text_with_icon").val($(this).val());
  });
</script>
